<template>
  <div id="GoodList">
    <div class="w1224">

      <div class="floor floor1 clearfix">
        <div class="floor-top clearfix border-box">
          <h3 class="floor-title border-box">
            <span class="floor-title-name border-box" data-text="文具"
              >文具</span
            >
          </h3>
        </div>
        <div class="floor-main clearfix">
          <div class="floor-goods-list border-box">
            <div class="floor-goods-item animate-scale">
              <a href="/Goods/goods/id/57592.html">
                <div class="goods-pic">
                  <img
                    class="w-100"
                    src="/Public/upload/goods/thumb/57592/goods_thumb_57592_180_180.jpg"
                    alt=""
                  />
                </div>
              </a>
              <div class="goods-con border-box">
                <div class="goods-name border-box">
                  北极熊（Polar bear）无痕纳米双面胶带 透明防...
                </div>
                <div class="goods-price border-box">
                  <span class="shop-price ellipsis-1">¥15.00</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: "GoodList",
};
</script>

<style lang="scss" scoped>
.w1224 {
  width: 1200px;
  margin: 0 auto;
}
.floor {
    margin-top: 30px;
    height: auto;
}
.floor-top {
    height: 24px;
    width: 100%;
    position: relative;
}
.floor-top .floor-title {
    display: inline-block;
    height: 24px;
    line-height: 24px;
    font-size: 0;
    position: relative;
}
.floor-top .floor-title:before {
    content: "";
    width: 4px;
    height: 24px;
    background-color: #01b9fe;
    position: absolute;
    left: 0;
    top: 0;
}
.floor-top .floor-title span {
    font-size: 24px;
    font-weight: 700;
    padding-left: 14px;
    display: inline-block;
    height: 100%;
    position: relative;
    color: #4352bf;
}
.floor-main {
    margin-top: 16px;
    position: relative;
}
.floor-goods-list {
    width: 100%;
    overflow: hidden;
}
.floor-goods-item:nth-child(5n+1) {
    margin-left: 0;
}
.floor-goods-item {
    width: 232px;
    height: 300px;
    float: left;
    overflow: hidden;
    background: #fff;
    position: relative;
    margin: 0 0 0 16px;
}
.floor-goods-item>a {
    display: block;
    width: 100%;
    height: 217px;
    position: relative;
    overflow: hidden;
}
.floor-goods-item .goods-con {
    width: 100%;
    height: 83px;
    padding: 5px 15px 0;
    position: relative;
}
.floor-goods-item .goods-con .goods-name {
    font-size: 14px;
    width: 100%;
    line-height: 16px;
    color: #444;
    overflow: hidden;
    word-break: break-all;
    height: 32px;
    position: relative;
}
.floor-goods-item .goods-con .goods-price {
    font-size: 16px;
    height: 26px;
    line-height: 26px;
    color: #f62028;
    margin-top: 10px;
    position: relative;
}
.floor-goods-item .goods-con .goods-price>span {
    display: inline-block;
    font-weight: 700;
}
</style>